<template>
  <div class="Login">
    <div class="banner">FruitShop CMS</div>
    <div class="login-box">
      <label for="username">
        <div class="title">用户名</div>
        <input
          type="text"
          required
          id="username"
          placeholder="输入用户名"
          :class="{ _valid: inputStatus.userName }"
          v-model="userName"
          @input="inputStatus.userName = /^(\w){4,12}$/.test(userName)"
        />
      </label>
      <label for="password">
        <div class="title">密码 <span>忘记密码?</span></div>
        <input
          type="password"
          required
          id="password"
          placeholder="输入密码"
          :class="{ _valid: inputStatus.userPass }"
          v-model="userPass"
          @input="inputStatus.userPass = /^(\w){5,}$/.test(userPass)"
      /></label>
      <label for="verify_code">
        <div class="title">验证码</div>
        <div class="verify-code-area">
          <input
            type="text"
            required
            id="verify-code"
            placeholder="输入验证码"
            autocomplete="off"
            :class="{ _valid: inputStatus.verifyCode }"
            v-model="verifyCode"
            @input="inputStatus.verifyCode = /^(\w){4,6}$/.test(verifyCode)"
          />
          <div class="verify-code">
            <img
              v-show="verifyCodeImg.length !== 0"
              :src="`data:image/jpg;base64,${verifyCodeImg}`"
              alt="verify_code"
              class="verify-code-img"
              @click="getVerifyCode(identityCode)"
            />
          </div>
        </div>
      </label>
      <div class="login-action btn" @click="onLogin(identityCode)">登录</div>
      <div class="phone-login btn">手机号登录</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, onMounted } from 'vue'
import { useLogin } from '../composable/useLogin'
export default defineComponent({
  setup() {
    const {
      userName,
      userPass,
      verifyCode,
      getVerifyCode,
      verifyCodeImg,
      inputStatus,
      generateIdentityCode,
      onLogin,
    } = useLogin()
    // 身份码
    const identityCode = computed(() => generateIdentityCode())
    onMounted(() => {
      document.onkeydown = e => {
        if (e.code === 'Enter') onLogin(identityCode.value)
      }
      getVerifyCode(identityCode.value)
    })
    return {
      userName,
      userPass,
      verifyCode,
      inputStatus,
      identityCode,
      getVerifyCode,
      verifyCodeImg,
      onLogin,
    }
  },
})
</script>

<style lang="scss">
@import '../assets/styles/_var.scss';
.Login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('../assets/HomeBg.svg');
  background-size: cover;
  height: 100%;
  .banner {
    font-size: 1.5rem;
    font-weight: bold;
    margin: #{$pad-1} 0;
    color: $green;
  }
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding: $pad-1;
    & > label {
      display: block;
      width: 100%;
      .title {
        display: block;
        margin: 8px 0;
        font-weight: bold;
        font-size: 0.9rem;
        span {
          color: $gray-6;
          font-size: 0.75rem;
          font-weight: normal;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      input {
        box-sizing: border-box;
        border: 2px solid #{$red};
        height: 35px;
        border-radius: 5px;
        outline: none;
        width: 100%;
        padding: 0 #{$pad-1};
        font-size: 0.9rem;
        transition: border #{$transition-1};
        &._valid {
          border: 2px solid #{$green};
        }
      }
      .verify-code-area {
        display: flex;
        margin-bottom: $pad-1;
        .verify-code {
          flex-shrink: 0;
          height: 35px;
          width: 110px;
          margin-left: $pad-1;
          cursor: pointer;
          .el-loading-spinner {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 35px;
            transform: translateY(3px);
            .path {
              stroke: $green;
              stroke-width: 3px;
            }
            .circular {
              height: 30px;
              width: 30px;
            }
          }
          img {
            height: 35px;
            width: 110px;
          }
        }
      }
    }
    .verify_code_area {
      display: flex;
      height: 35px;
      margin: #{$pad-1} 0;
      width: 100%;

      label {
        flex-grow: 1;
      }
    }
    .btn {
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      padding: 4px 0;
      width: 100%;
      color: #fff;
      text-align: center;
      cursor: pointer;
      &.login-action {
        background: $green;
      }
      &.phone-login {
        margin-top: 10px;
        background: $white;
        color: $green;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
